<template>
  <view class="home-container">
    <!-- home顶部图片 -->
    <view class="header">
      <view class="u-padding-40">
        <u-search placeholder="搜索热门游戏" v-model="key" height="72" bg-color="#FFFFFF" :show-action="false"
          :clearabled="false" @focus="go2Search"></u-search>
      </view>
    </view>

    <!-- 分类 -->
    <view class="func-content u-padding-40">
      <view class="cate-wrap">
        <view class="item" @click="go2List('休闲')">
          <image mode="aspectFit" src="/static/c1.png"></image>
          <text>休闲</text>
        </view>
        <view class="item" @click="go2List('益智')">
          <image mode="aspectFill" src="/static/c2.png"></image>
          <text>益智</text>
        </view>
        <view class="item" @click="go2List('冒险')">
          <image mode="aspectFill" src="/static/c3.png"></image>
          <text>冒险</text>
        </view>
        <view class="item" @click="go2List('策略')">
          <image mode="aspectFill" src="/static/c4.png"></image>
          <text>策略</text>
        </view>
      </view>
      <!-- 间隔槽 -->
      <u-gap class="u-margin-30" height="2" bg-color="#E4E4E4"></u-gap>
      <!-- 轮播 :autoplay="autoplay" -->
      <swiper class="swiper" :indicator-dots="true" indicator-color="#D4D5DE" indicator-active-color="#006CFF">
        <swiper-item v-for="item in swiperList" :key="item.id">
          <u-cell-group>
            <u-cell-item class="item" :arrow="false" @click="startGame(item.url)">
              <image slot="icon" :src="item.pic"></image>
              <view slot="title">
                <view class="title">{{ item.name }}</view>
                <view>
                  <u-rate disabled inactive-color="#FFCC01" inactive-icon="star-fill" :count="item.point"></u-rate>
                </view>
                <view class="desc">{{ item.type }}</view>
              </view>
              <u-button class="btn" slot="right-icon" shape="circle" :ripple="true" size="mini" @click="startGame(item.url)">开始游戏</u-button>
            </u-cell-item>
          </u-cell-group>
        </swiper-item>
      </swiper>

    </view>

    <!-- 提示栏 -->
    <u-cell-group :border="false" class="tips-wrap">
      <u-cell-item @click="go2List('热门')">
        <view slot="title" class="title">
          <view class="content">
            <text class="left"></text>
            <view>今日热门</view>
          </view>
        </view>
      </u-cell-item>
    </u-cell-group>

    <!-- 今日热门 -->
    <view class="hot-content u-padding-30">
      <view class="hot-item" v-for="(item, index) in hotList" :key="item.id">
        <image mode="aspectFit" :src="item.pic"></image>
        <view class="t1">{{ item.name }}</view>
        <view class="t2">{{ item.type }}</view>
        <u-button :style="{
          backgroundColor: bgcMap[index]
        }" class="btn" ripple shape="circle" size="mini" @click="startGame(item.url)">开始游戏</u-button>
      </view>
    </view>
    
    <!-- 未登录提示框 -->
    <u-modal class="bind-modal" ref="uModal" v-model="show" :title="title" confirm-text="登录" :mask-close-able="true" :async-close="true" @confirm="confirm">
      <view class="tips-text" v-if="title === '您尚未登陆'">
        <view>马上登陆，可享精彩内容</view>
        <view>经检测，您尚未注册账户</view>
      </view>
      <u-field v-else label-width="0" type="tel" maxlength="11" label-align="center" placeholder="请输入手机号" v-model="phone"></u-field>
    </u-modal>
  </view>
</template>

<script>
  import {
    getSwiperList,
    getHotList,
    isCanPlay,
    bindMobile
  } from '../../api/index.js'

  export default {
    name: 'Home',
    data() {
      return {
        phone: '',
        title: '您尚未登陆',
        show: false,
        key: '',
        options: [{
          text: '取消',
          style: {
            backgroundColor: '#007aff'
          }
        }, {
          text: '确认',
          style: {
            backgroundColor: '#dd524d'
          }
        }],
        background: ['color1', 'color2', 'color3'],
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500,
        swiperList: [],
        hotList: [],
        bgcMap: {
          0: '#007AFF',
          1: '#FF6C00',
          2: '#5400FF'
        }
      }
    },
    onLoad() {
      this.loadSwiperList()
      this.loadHotList()
    },
    methods: {
      async loadHotList() {
        const res = await getHotList()
        this.hotList = res.data.list
        // 取热门列表中的前三个
        this.hotList.length = 3
      },
      async loadSwiperList() {
        const res = await getSwiperList()
        this.swiperList = res.data.list
      },
      async startGame(url) {
        const mobile = uni.getStorageSync('hwyx-mobile')
        if (!mobile) {
          this.show = true
          return
        }
        const res = await isCanPlay({
          mobile
        })
        if (res.data.result === 'false') {
          this.$u.toast(res.data.message)
        } else {
          location.href = url
        }
      },
      onClick(e) {
        console.log('点击了' + (e.position === 'left' ? '左侧' : '右侧') + e.content.text + '按钮')
      },
      async confirm() {
        if (this.title === '您尚未登陆') {
          this.$refs.uModal.clearLoading()
          return this.title = '请输入绑定好玩游戏的手机账号'
        }
        if (!this.phone) {
          this.$u.toast('请输入手机号')
          return this.$refs.uModal.clearLoading()
        }
        const reg = /^[1]((33)|(49)|(53)|(70)|(73)|(77)|(80)|(81)|(89)|(99)|(91))[0-9]{8}$/
        if (!reg.test(this.phone)) {
          this.$u.toast('请输入电信手机号')
          return this.$refs.uModal.clearLoading()
        }
        const res = await bindMobile({ mobile: this.phone + '' })
        this.$u.toast('手机号绑定成功')
        this.show = false
        uni.setStorageSync('hwyx-mobile', this.phone)
        this.phone = ''
      },
      swipeChange(e, index) {
        console.log('当前状态：' + e + '，下标：' + index)
      },
      async go2Search() {
        const mobile = uni.getStorageSync('hwyx-mobile')
        if (!mobile) {
          this.show = true
          return
        }
        const res = await isCanPlay({
          mobile
        })
        if (res.data.result === 'false') {
          this.$u.toast(res.data.message)
        } else {
          uni.navigateTo({
            url: '/pages/search/search'
          })
        }
      },
      async go2List(type) {
        const mobile = uni.getStorageSync('hwyx-mobile')
        if (!mobile) {
          this.show = true
          return
        }
        const res = await isCanPlay({
          mobile
        })
        if (res.data.result === 'false') {
          this.$u.toast(res.data.message)
        } else {
          if (res.data.data.pid === 98) {
            uni.navigateTo({
              url: '/pages/list/list?type=' + type
            })
          }
        }
      }
    }
  }
</script>

<style lang="scss">
  .home-container {
    .header {
      background-image: url(../../static/head-bg.png);
      height: 588rpx;
      background-size: cover;

      // 深度作用搜索框的透明度
      /deep/.u-search {
        .u-content {
          opacity: .6;

          .uni-input-placeholder {
            font-size: 24rpx;
            color: #707587;
            font-family: Source Han Sans CN;
          }
        }
      }
    }

    .func-content {
      width: 683rpx;
      height: 419rpx;
      background: #FFFFFF;
      box-shadow: 0px 0px 15rpx 1px rgba(15, 21, 69, 0.17);
      border-radius: 28rpx;
      margin: -100rpx auto 20rpx;

      .cate-wrap {
        display: flex;
        justify-content: space-around;

        .item {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          image {
            width: 68rpx;
            height: 68rpx;
            margin-bottom: 10rpx;
          }

          text {
            font-size: 24rpx;
            color: #4B4D54;
          }
        }
      }

      .swiper {
        height: 210rpx;

        .item {
          padding: 0 10rpx;

          image {
            width: 132rpx;
            height: 132rpx;
            border-radius: 20rpx;
            margin-right: 30rpx;
          }

          .title {
            font-size: 34rpx;
            font-family: SourceHanSansSC;
            font-weight: bold;
            color: #2C2C2D;
          }

          .u-rate {
            color: #FFCC01;
          }

          .desc {
            font-size: 24rpx;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #5A5B5E;
          }

          .btn {
            height: 56rpx;
            background: linear-gradient(0deg, #004EFF 0%, #066FFF 100%);
            border: none;
            color: #FFF;
            font-size: 24rpx;
          }

          .u-default-hover {
            border: none;
          }
        }

        /deep/.uni-swiper-dot {
          width: 30rpx;
          height: 10rpx;
          border-radius: 0;
        }

        .u-border-bottom:after {
          border: 0;
        }
      }
    }

    // 提示消息
    .tips-wrap {
      .title {
        .content {
          font-weight: bold;
          display: flex;
          align-items: center;
        }

        .left {
          height: 33rpx;
          width: 10rpx;
          display: block;
          background: linear-gradient(0deg, #FF1435 0%, #FF657B 100%);
          margin-right: 10rpx;
          border-radius: 5rpx;
        }
      }

      /deep/.u-icon--right {
        color: #8991A9;
      }
    }

    // 今日热门列表
    .hot-content {
      display: flex;
      justify-content: center;

      .hot-item {
        width: 239rpx;
        height: 356rpx;
        flex: 1;
        margin-right: 10rpx;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        padding-left: 20rpx;

        image {
          width: 132rpx;
          height: 132rpx;
          border-radius: 30rpx;
        }

        .t1 {
          font-size: 28rpx;
          font-family: SourceHanSansSC;
          font-weight: bold;
          color: #fff;
          margin-top: 30rpx;
        }

        .t2 {
          font-size: 24rpx;
          font-family: SourceHanSansSC;
          font-weight: bold;
          color: #fff;
          margin-top: 10rpx;
        }

        .btn {
          margin-top: 30rpx;
          border: none;
          font-size: 24rpx;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFF;
          // margin: 0 a;
        }

        .u-hairline-border:after {
          border: none;
        }
      }

      .hot-item:nth-child(1) {
        background-image: url(../../static/hot1.png);
      }

      .hot-item:nth-child(2) {
        background-image: url(../../static/hot2.png);
      }

      .hot-item:nth-child(3) {
        background-image: url(../../static/hot3.png)
      }
    }

    // 去除 swiper 轮播组件上下默认边框
    /deep/.u-border-top:after {
      border: none;
    }
    /deep/.u-model__title {
      font-size: 34rpx;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
    .tips-text {
      padding: 60rpx;
      text-align: center;
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
    }
    /deep/.u-model__footer__button {
      flex: unset;
      width: 255rpx;
      height: 77rpx;
      line-height: 77rpx;
      background: #8FAFFF;
      border-radius: 39rpx;
      font-size: 30rpx;
      font-family: SourceHanSansCN-Regular, SourceHanSansCN;
      font-weight: 400;
      color: #FFFFFF!important;
      margin: auto;
      margin-bottom: 50rpx;
    }
    .u-field {
      font-size: 34rpx;
      color: #333;
      background-color: #F6F6F6;
      margin: 60rpx 60rpx 30rpx;
      border-radius: 50rpx;
    }
  }
</style>
